<template>
    <div class="page-container">
        <!-- 主要内容区域 -->
        <div class="main-content">
            <el-card class="data-card">
                <div class="card-header">
                    <div class="header-left">
                        <span class="card-title">今日数据</span>
                        <span class="card-date">{{ time }}</span>
                    </div>
                    <div class="header-right">
                        <!-- 营业状态显示和选择 -->
                        <div class="business-status-container">
                            <el-icon class="status-icon"><Clock /></el-icon>
                            <span class="business-status-label">营业状态：</span>
                            <el-select v-model="currentStatus" class="business-status-select" @change="changeStatus">
                                <el-option label="营业中" value="营业中"></el-option>
                                <el-option label="暂停营业" value="暂停营业"></el-option>
                            </el-select>
                        </div>
                        <el-button link @click="doList" class="detail-button">
                            <span>详细数据</span>
                            <el-icon><ArrowRightBold /></el-icon>
                        </el-button>
                    </div>
                </div>

                <el-row :gutter="20" class="data-row">
                    <el-col :span="4">
                        <div class="data-item">
                            <div class="data-label">营业额</div>
                            <div class="data-value"><span class="currency">￥</span>{{ ddShow.total || 0 }}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="data-item">
                            <div class="data-label">有效订单</div>
                            <div class="data-value">{{ddShow.count || 0}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="data-item">
                            <div class="data-label">订单完成率</div>
                            <div class="data-value">{{ddShow.ddwcl || 0}}<span class="percent">%</span></div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="data-item">
                            <div class="data-label">平均客单价</div>
                            <div class="data-value"><span class="currency">￥</span>{{ (ddShow.pjkdj || 0).toFixed(2) }}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="data-item">
                            <div class="data-label">新增评论</div>
                            <div class="data-value">{{ddShow.xzpl}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="data-item">
                            <div class="data-label">退款订单</div>
                            <div class="data-value">{{ddShow.tuikuan || 0}}</div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>

            <el-card class="order-card">
                <div class="card-header">
                    <div class="header-left">
                        <span class="card-title">订单管理</span>
                        <span class="card-date">{{ time }}</span>
                    </div>
                    <div class="header-right">
                        <el-button link @click="showDDMX" class="detail-button">
                            <span>订单明细</span>
                            <el-icon><ArrowRightBold /></el-icon>
                        </el-button>
                    </div>
                </div>

                <el-row :gutter="20" class="order-row">
                    <el-col :span="4">
                        <div class="order-item">
                            <div class="order-icon">
                                <el-icon><DocumentAdd /></el-icon>
                            </div>
                            <div class="order-info">
                                <div class="order-label">未配送</div>
                                <div class="order-count">{{ddmx.wps}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="order-item">
                            <div class="order-icon">
                                <el-icon><SetUp /></el-icon>
                            </div>
                            <div class="order-info">
                                <div class="order-label">配送中</div>
                                <div class="order-count">{{ddmx.psz}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="order-item">
                            <div class="order-icon">
                                <el-icon><Checked /></el-icon>
                            </div>
                            <div class="order-info">
                                <div class="order-label">已完成</div>
                                <div class="order-count">{{ddmx.ysd}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="order-item">
                            <div class="order-icon">
                                <el-icon><Failed /></el-icon>
                            </div>
                            <div class="order-info">
                                <div class="order-label">待支付</div>
                                <div class="order-count">{{ddmx.dzf}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="order-item">
                            <div class="order-icon">
                                <el-icon><List /></el-icon>
                            </div>
                            <div class="order-info">
                                <div class="order-label">全部订单</div>
                                <div class="order-count">{{ddmx.count}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="order-item">
                            <div class="order-icon">
                                <el-icon><Warning /></el-icon>
                            </div>
                            <div class="order-info">
                                <div class="order-label">退单</div>
                                <div class="order-count">{{ddmx.tuikuan || 0}}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>

            <div class="bottom-section">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card class="overview-card" style="height: 262px">
                            <div class="card-header">
                                <div class="header-left">
                                    <span class="card-title">菜品总览</span>
                                </div>
                                <div class="header-right">
                                    <el-button link @click="updateCaiPinData" class="refresh-button">
                                        <el-icon><Refresh /></el-icon>
                                    </el-button>
                                </div>
                            </div>

                            <el-row :gutter="20" class="overview-row">
                                <el-col :span="12">
                                    <div class="overview-item">
                                        <div class="overview-icon">
                                            <el-icon><Tickets /></el-icon>
                                        </div>
                                        <div class="overview-info">
                                            <div class="overview-label">已启售</div>
                                            <div class="overview-count">{{ caiPinShow.qiShou }}</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="overview-item">
                                        <div class="overview-icon">
                                            <el-icon><Tickets /></el-icon>
                                        </div>
                                        <div class="overview-info">
                                            <div class="overview-label">已停售</div>
                                            <div class="overview-count">{{ caiPinShow.tingShou }}</div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>

                    <el-col :span="12">
                        <el-card class="fee-card">
                            <div class="card-header">
                                <div class="header-left">
                                    <span class="card-title">配送费用设置</span>
                                </div>
                                <div class="header-right">
                                    <el-button link @click="saveFeeSettings" class="save-button">
                                        <el-icon><Check /></el-icon>
                                    </el-button>
                                </div>
                            </div>

                            <div class="fee-form-container">
                                <el-form :model="feeForm" label-width="80px" class="fee-form">
                                    <el-form-item label="配送费">
                                        <el-input-number
                                            v-model="feeForm.psf"
                                            :min="0"
                                            :max="50"
                                            :step="1"
                                            controls-position="right"
                                            class="fee-input"
                                        />
                                        <span class="fee-unit">元</span>
                                    </el-form-item>
                                    <el-form-item label="打包费">
                                        <el-input-number
                                            v-model="feeForm.dbf"
                                            :min="0"
                                            :max="20"
                                            :step="1"
                                            controls-position="right"
                                            class="fee-input"
                                        />
                                        <span class="fee-unit">元</span>
                                    </el-form-item>
                                    <el-form-item label="起送费">
                                        <el-input-number
                                            v-model="feeForm.qsf"
                                            :min="0"
                                            :max="100"
                                            :step="5"
                                            controls-position="right"
                                            class="fee-input"
                                        />
                                        <span class="fee-unit">元</span>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 底部footer区域 -->
        <footer class="page-footer">
            <div class="footer-content">
                <div class="footer-info">
                    <el-icon class="footer-icon"><CircleCheck /></el-icon>
                    <span class="footer-text">欢迎入驻饿了美外卖平台 | 感谢您选择饿了美外卖平台，我们将竭诚为您提供优质的服务</span>
                </div>
                <div class="contact-info">
                    <div class="contact-item">
                        <el-icon class="contact-icon"><Phone /></el-icon>
                        <span class="contact-text">入驻热线：<span class="contact-value">188-6666-8866</span></span>
                    </div>
                    <div class="contact-item">
                        <el-icon class="contact-icon"><Service /></el-icon>
                        <span class="contact-text">客服微信：<span class="contact-value">_Hungry Beautiful_</span></span>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import {
    ArrowRightBold,
    Checked,
    CircleCheck,
    Clock,
    DocumentAdd,
    Failed,
    List,
    Phone,
    Refresh,
    Service,
    SetUp,
    Tickets,
    Warning
} from "@element-plus/icons-vue";
import axios from "axios";
import {useUserStore} from "../pages/stores/user";
import {storeToRefs} from "pinia";
import {ElMessage} from "element-plus";

const time = ref('')
let timer: number

// 初始化时间
const updateTime = () => {
    const now = new Date()
    time.value = `${now.getFullYear()}.${(now.getMonth() + 1).toString().padStart(2, '0')}.${now.getDate().toString().padStart(2, '0')}`
}

// 获取订单数据
const ddShow = ref({})
const userStore = useUserStore()
const {userInfo} = storeToRefs(userStore)
const feeForm = ref({
    psf: 0,
    dbf: 0,
    qsf: 0
})

const getShangJia = async () => {
    console.log(userInfo.value.sjid)
    const {data} = await axios.get(`/api/shangjia/id/${userInfo.value.sjid}`)
    if(data.code === 200) {
        feeForm.value.psf = data.data.psf
        feeForm.value.dbf = data.data.dbf
        feeForm.value.qsf = data.data.qsf
    }
}

const saveFeeSettings = async () => {
    feeForm.value.sjid = userInfo.value.sjid
    const {data} = await axios.put(`/api/shangjia`, feeForm.value)
    if(data.code === 200) {
        alert('保存成功')
    }
}

const doList = async () => {
    const {data} = await axios.post(`/api/worksj/query/${userInfo.value.yhid}`)
    if(data.code === 200) {
        ddShow.value = data.data
    }
}

// 获取订单明细数据
const ddmx = ref({})
const showDDMX = async () => {
    const {data} = await axios.post(`/api/worksj/queryDdmx/${userInfo.value.sjid}`)
    console.log(data)
    if(data.code === 200){
        ddmx.value = data.data
    }
}

// 设置营业状态
const currentStatus = ref(''); // 初始化为默认值
const changeStatus = async (newStatus: string) => {
    try {
        const { data: shangJiaData } = await axios.get(`/api/shangjia/yhid/${userInfo.value.yhid}`);
        console.log('商家状态部分的商家信息响应:', shangJiaData.data);
        if (shangJiaData.code !== 200) {
            console.error('获取商家信息失败:', shangJiaData);
            return;
        }
        const shangJia = shangJiaData.data;
        const { data: updateData } = await axios.put(`/api/shangjia/status/${shangJia.sjid}`, { status: newStatus });
        if (updateData.code === 200) {
            ElMessage.success('状态修改成功');
        } else {
            ElMessage.error('状态修改失败');
        }
    } catch (error) {
        console.error('修改状态时发生错误:', error);
        ElMessage.error('操作失败，请稍后再试');
    }
};

// 停售/起售数据
const caiPinShow = ref({
    qiShou: 0,
    tingShou: 0
});
const updateCaiPinData = async () => {
    const { data } = await axios.get(`/api/shangjia/yhid/${userInfo.value.yhid}`)
    const shangJia = data.data;
    if (!shangJia || !shangJia.sjid) {
        console.error('未找到对应的商家信息');
        return;
    }
    const caiPinUrl = `/api/caiPin/sjid/${shangJia.sjid}`;
    const caiPinResponse = await axios.get(caiPinUrl);
    if (caiPinResponse.data.code === 200) {
        // 根据实际返回的数据结构调整
        let qiShouCount = 0;
        let tingShouCount = 0;
        // 遍历菜品列表统计启售和停售数量
        if (Array.isArray(caiPinResponse.data.data) && caiPinResponse.data.data.length > 0) {
            caiPinResponse.data.data.forEach(item => {
                if (item.status === "0") { // status=0 表示启售
                    qiShouCount++;
                } else { // status=1 表示停售
                    tingShouCount++;
                }
            });
        }
        caiPinShow.value.qiShou = qiShouCount;
        caiPinShow.value.tingShou = tingShouCount;
    }
};

onMounted(() => {

    updateTime()
    timer = setInterval(updateTime, 60000);
    // 延迟调用 updateCaiPinData 确保 userInfo 已加载
    setTimeout(() => {
        if (userInfo.value && userInfo.value.yhid !== undefined) {
            updateCaiPinData(); // 初始化获取菜品数据
            doList();
            showDDMX()
            getShangJia()
        } else {
            console.warn('用户信息未加载完成，跳过初始化菜品数据获取');
        }
    }, 500);
})

onUnmounted(() => {
    clearInterval(timer)
})
</script>

<style scoped>
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 86vh;
    padding: 20px;
    background-color: #f5f5f5;
}

.main-content {
    flex: 1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.card-date {
    font-size: 14px;
    color: #999;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.detail-button {
    color: #999;
    font-size: 14px;
}

.detail-button:hover {
    color: #f58147;
}

.business-status-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-icon {
    color: #f58147;
}

.business-status-label {
    font-weight: 500;
    color: #666;
}

.business-status-select {
    width: 120px;
}

.data-card,
.order-card,
.overview-card,
.fee-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.data-card :deep(.el-card__body),
.order-card :deep(.el-card__body),
.overview-card :deep(.el-card__body),
.fee-card :deep(.el-card__body) {
    padding: 20px;
}

.data-row {
    margin: 0 -10px;
}

.data-item {
    background-color: #fff9f2;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.data-value {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.currency {
    font-size: 16px;
    margin-right: 2px;
}

.percent {
    font-size: 16px;
}

.order-row {
    margin: 0 -10px;
}

.order-item {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    height: 80px;
}

.order-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f58147;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.order-icon .el-icon {
    color: white;
    font-size: 20px;
}

.order-info {
    flex: 1;
}

.order-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.order-count {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.bottom-section {
    margin-top: 10px;
}

.overview-row {
    margin: 0 -10px;
}

.overview-item {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    height: 80px;
}

.overview-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.overview-icon .el-icon {
    color: white;
    font-size: 20px;
}

.overview-info {
    flex: 1;
}

.overview-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.overview-count {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.refresh-button,
.save-button {
    font-size: 18px;
    color: #999;
}

.refresh-button:hover,
.save-button:hover {
    color: #f58147;
}

.fee-form-container {
    padding: 10px 0;
}

.fee-form :deep(.el-form-item) {
    margin-bottom: 20px;
}

.fee-form :deep(.el-form-item__label) {
    color: #666;
    font-weight: 500;
}

.fee-input {
    width: 200px;
}

.fee-unit {
    margin-left: 8px;
    color: #666;
}

/* 底部footer样式 */
.page-footer {
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.footer-text {
    font-size: 14px;
    text-align: center;
    color: #333;
}

.footer-icon {
    font-size: 18px;
    color: #f58147;
    margin-right: 8px;
}

.contact-info {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-item {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.contact-text {
    color: #666;
}

.contact-value {
    color: #f58147;
    font-weight: 500;
}

.contact-icon {
    font-size: 16px;
    color: #f58147;
    margin-right: 5px;
}

@media (max-width: 1200px) {
    .data-row,
    .order-row,
    .overview-row {
        flex-wrap: wrap;
    }

    .data-item,
    .order-item,
    .overview-item {
        min-width: 180px;
        margin-bottom: 15px;
    }

    .bottom-section :deep(.el-col) {
        margin-bottom: 20px;
    }
}
</style>
